<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #82aee8 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        .container {
            background: white;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            padding: 30px;
            width: 100%;
            max-width: 800px;
        }

        h1 {
            color: #2c3e50;
            text-align: center;
            margin-bottom: 30px;
            font-size: 2.5em;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
        }

        .table-container {
            overflow-x: auto;
            margin: 20px 0;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        table {
            width: 100%;
            border-collapse: collapse;
            background: white;
        }

        th {
            background: #3498db;
            color: white;
            padding: 15px;
            text-align: left;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        td {
            padding: 12px 15px;
            border-bottom: 1px solid #ddd;
            transition: background-color 0.3s ease;
        }

        tr:hover td {
            background-color: #f5f5f5;
        }

        tr:last-child td {
            border-bottom: none;
        }

        .logout-container {
            position: absolute;
            top: 20px;
            right: 20px;
        }

        .logout-link {
            display: inline-block;
            padding: 10px 20px;
            background: #e74c3c;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }

        .logout-link:hover {
            background: #c0392b;
        }

        .loading {
            text-align: center;
            padding: 20px;
            color: #666;
        }

        .error {
            color: #e74c3c;
            text-align: center;
            padding: 20px;
            background: #fdf2f2;
            border-radius: 5px;
            margin: 10px 0;
        }

        @media (max-width: 600px) {
            .container {
                padding: 15px;
            }

            h1 {
                font-size: 1.8em;
            }

            th, td {
                padding: 8px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>欢迎来到主页</h1>

        <div class="table-container">
            <table>
                <thead>
                    <tr>
                        <th>用户名</th>
                        <th>密码</th>
                    </tr>
                </thead>
                <tbody id="userTableBody">
                    <tr>
                        <td colspan="2" class="loading">加载中...</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div class="logout-container">
        <a href="index.html" class="logout-link" onclick="handleLogout(event)">退出登录</a>

<!--<script>-->
<!--    function handleLogout(event) {-->
<!--        event.preventDefault(); // 阻止默认跳转-->

<!--        // 发送GET请求-->
<!--        fetch('user/logout', {-->
<!--            method: 'GET',-->
<!--            credentials: 'same-origin' // 确保携带cookie-->
<!--        })-->
<!--        .then(response => {-->
<!--            if (response.ok) {-->
<!--                // 请求成功后跳转-->
<!--                window.location.href = 'index.html';-->
<!--            } else {-->
<!--                // 即使请求失败也跳转，但可以添加错误提示-->
<!--                console.error('登出请求失败');-->
<!--                window.location.href = 'index.html';-->
<!--            }-->
<!--        })-->
<!--        .catch(error => {-->
<!--            console.error('登出请求错误:', error);-->
<!--            // 发生错误时仍然跳转-->
<!--            window.location.href = 'index.html';-->
<!--        });-->
<!--    }-->
<!--</script>-->

    </div>

<!--    <script>-->
<!--        document.addEventListener('DOMContentLoaded', function() {-->
<!--            const tableBody = document.getElementById('userTableBody');-->

<!--            fetch('user/all')-->
<!--                .then(response => {-->
<!--                    if (!response.ok) {-->
<!--                        throw new Error('Network response was not ok');-->
<!--                    }-->
<!--                    return response.json();-->
<!--                })-->
<!--                .then(data => {-->
<!--                    // 清空加载提示-->
<!--                    tableBody.innerHTML = '';-->

<!--                    if (data.length === 0) {-->
<!--                        tableBody.innerHTML = '<tr><td colspan="2" class="loading">暂无数据</td></tr>';-->
<!--                        return;-->
<!--                    }-->

<!--                    data.forEach(user => {-->
<!--                        const row = document.createElement('tr');-->
<!--                        const usernameCell = document.createElement('td');-->
<!--                        const passwordCell = document.createElement('td');-->

<!--                        usernameCell.textContent = user.username;-->
<!--                        passwordCell.textContent = '••••••••';  // 隐藏密码显示-->

<!--                        row.appendChild(usernameCell);-->
<!--                        row.appendChild(passwordCell);-->
<!--                        tableBody.appendChild(row);-->
<!--                    });-->
<!--                })-->
<!--                .catch(error => {-->
<!--                    console.error('Error:', error);-->
<!--                    tableBody.innerHTML = '<tr><td colspan="2" class="error">加载数据失败，请稍后重试</td></tr>';-->
<!--                });-->
<!--        });-->
<!--    </script>-->
</body>
</html>
